<script setup>
import TheAvatar from "./TheAvatar.vue";
import PostActions from "./PostActions.vue";
import { useStore } from "vuex";
import { dateToRef } from "../utils/dateDiff.js";
import { computed } from "vue";
const store = useStore();
const postId = 123456;

//详情
defineProps({
  post: Object,
});
</script>

<template>
  <div class="postItem">
    <!-- <span style="font-size: '20px'">{{ post }}</span> -->
    <img
      @click="store.dispatch('showPostDetail', postId)"
      src="../assets/large_screenshot_20170508_170345_cf6bb41a78.png"
    />
    <div class="postInfo">
      <div class="postMeta">
        <TheAvatar class="avatar"></TheAvatar>
        <span class="name">{{ post.name }}</span>
        <span class="postPubDate">{{ dateToRef(post.pubDate) }}</span>
        <PostActions
          @likeClick="store.dispatch('toggleLike', 45)"
          :likes="5"
          :comments="5"
          :favors="5"
          :likeByMe="true"
          :favorByMe="false"
          class="postActions"
        ></PostActions>
      </div>
      <div class="postDesc">
        <p>
          {{ post.description }}
        </p>
      </div>
    </div>
  </div>
</template>

<style scoped>
.postItem {
  /* width: 544px; */
  /* height: 606px; */
  /* background: pink; */
  box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
}

.postInfo {
  padding: 24px;
}

.postItem > img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  background: #eee;
  cursor: pointer;
}

.postMeta {
  display: grid;
  grid-template-areas: "avatar name actions" "pubDate pubDate actions";
  grid-template-columns: 42px 1fr 3fr;
  row-gap: 6px;
}

.postMeta .avatar {
  grid-area: avatar;
}

.postMeta .name {
  grid-area: name;
  transform: translateY(5px);
}

.postMeta .postPubDate {
  grid-area: pubDate;
  color: #9f9f9f;
  font-size: 14px;
}

.postActions {
  grid-area: actions;
  justify-self: end;
}

.postDesc {
  margin-top: 28px;
  white-space: pre-line;
}
</style>
